Lecture 18 – Notes

📒 Notes for Lecture 18: CSS Box Model

Box Model Structure:
- Every HTML element is a rectangular box consisting of: Content → Padding → Border → Margin
Padding:
- Space between content and border
- Defined using the padding property
Border:
- Wraps around the padding and content
- Customizable with border property
Margin:
- Space outside the element’s border
- Controls spacing between elements
Box Sizing:
- box-sizing: border-box; includes padding and border in total width/height
Margin Collapse:
- Vertical margins of adjacent elements may collapse into a single margin
- Happens between siblings, nested elements, and empty blocks
Dimension Calculation:
- Total Width = width + left/right padding + left/right border + left/right margin
- Total Height = height + top/bottom padding + top/bottom border + top/bottom margin

Hinglish: Is lecture mein humne CSS Box Model ka structure samjha – content, padding, border aur margin. box-sizing: border-box use karke hum total width/height mein padding aur border ko include karte hain. Margin collapse ka matlab hota hai jab do elements ke vertical margins combine ho jaate hain instead of adding. Overall yeh model help karta hai layout ka size aur spacing control karne mein.

💻 Live Code Preview

If the iframe doesn’t load, click here to open Lecture 18 Demo in a new tab.

← Back to Lecture Dashboard